<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
    <link href="/favicon.ico" type="image/x-icon" rel="shortcut icon" />
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link href="/public/admin/css/bootstrap.min.css" rel="stylesheet">
    <link href="/public/admin/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/public/admin/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/public/admin/css/animate.css" rel="stylesheet">
    <link href="/public/admin/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="/public/admin/css/style.css?v=4.0.0" rel="stylesheet">
    <link href="/public/admin/css/ratuo.css" rel="stylesheet">
    <!-- jQuery 2.1.4 -->
    <script src="/public/admin/js/jquery.min.js?v=2.1.4"></script>
    <script src="/public/admin/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="/public/admin/js/myFormValidate.js"></script>
    <script src="/public/admin/js/common.js"></script>
    <script src="/public/admin/js/myAjax.js"></script>
    <script src="/public/admin/js/plugins/layer/layer.min.js"></script>
    <script src="/public/admin/js/jquery.validate.js"></script>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
 
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>前台导航列表</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="box">
                                    <div class="box-header">
                                        <div class="panel-body">
                                            <a onclick="location.href='{:url('Admin/System/addEditNav')}'" href="javascript:;" class="btn btn-primary"><i class="fa fa-plus"></i>新增导航</a>
                                            <a onclick="window.location.href=location.href;" href="javascript:;" class="btn btn-primary pull-left" style="margin-right:10px;"><i class="glyphicon glyphicon-refresh"></i>刷新</a>
                                        </div>                  
                                    </div><!-- /.box-header -->
                                    <div class="box-body">
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <table id="list-table" class="table table-bordered" style="text-align: center;">
                                                    <thead>
                                                        <tr role="row" >
                                                            <th>ID</th>
                                                            <th>导航名称</th>
                                                            <th>是否显示</th>
                                                            <th>是否新窗口</th>
                                                            <th>排序</th>
                                                            <th>操作</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="ajaxList">
                                                    {volist name="navigationList" id="list"}
                                                        <tr role="row" class="{$list.level}" id="{$list.level}_{$list.id}">
                                                            <td>{$list.id}</td>
                                                            <td class="sorting_1" align="left" style="padding-left:<?php echo ($list['level'] * 4); ?>em"> 
                                                            {if $list.is_leaf <> 1}
                                                                <span class="glyphicon glyphicon-minus btn-warning" id="icon_{$list.level}_{$list.id}" aria-hidden="true" onclick="rowClicked(this)" ></span>&nbsp;                  
                                                            {/if}<span><a style="color:#666;">{$list.name}</a></span>
                                                            </td>
                                                            <td align="left"><img width="20" class="cursor" height="20" src="/public/admin/images/{if $list[is_show] == 1}yes.png{else /}cancel.png{/if}" onclick="changeTableVal2('navigation','id','{$list.id}','is_show',this)"/></td>
                                                            <td align="left"><img width="20" class="cursor"  height="20" src="/public/admin/images/{if $list[is_new] == 1}yes.png{else /}cancel.png{/if}" onclick="changeTableVal2('navigation','id','{$list.id}','is_new',this)"/></td>
                                                            <td align="left"><input type="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" onpaste="this.value=this.value.replace(/[^\d]/g,'')" onchange="updateSort('navigation','id','{$list.id}','sort',this)"  size="4"  value="{$list.sort}" /></td>
                                                            <td align="left">
                                                                <a href="{:url('Admin/System/addEditNav',array('id'=>$list['id']))}" data-toggle="tooltip" title="修改导航" class="btn btn-primary" data-original-title="编辑"><i class="fa fa-pencil"></i></a>
                                                                <a href="javascript:del('{:url('System/delNav',array('id'=>$list['id']))}');" id="button-delete6" data-toggle="tooltip" title="删除导航" class="btn btn-danger" data-original-title="删除"><i class="fa fa-trash-o"></i></a>
                                                            </td>
                                                        </tr>
                                                    {/volist}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- ibox-content -->
                </div>
            </div>
        </div>

    </div>

<script>

    // 删除操作
    function del(url){
        parent.layer.confirm('确定要删除吗？', function(){
            $.ajax({
                url: url,
                success: function(v){
                    var v =  eval('('+v+')');
                    parent.layer.msg(v.msg, {icon: 1,time: 1000});
                    if(v.hasOwnProperty('status') && (v.status == 1))
                        location.href = location.href;
                }
            });
        });
    }
</script>
<script>
    // 以下是 bootstrap 自带的  js
    function rowClicked(obj){
        span = obj;

        obj = obj.parentNode.parentNode;
        console.log(obj);
        var tbl = document.getElementById("list-table");

        var lvl = parseInt(obj.className);

        var fnd = false;
      
        var sub_display = $(span).hasClass('glyphicon-minus') ? 'none' : '' ? 'block' : 'table-row' ;
        //console.log(sub_display);
        if(sub_display == 'none'){
            $(span).removeClass('glyphicon-minus btn-info');
            $(span).addClass('glyphicon-plus btn-warning');
        }else{
            $(span).removeClass('glyphicon-plus btn-info');
            $(span).addClass('glyphicon-minus btn-warning');
        }

        for (i = 0; i < tbl.rows.length; i++){
            var row = tbl.rows[i];
          
            if (row == obj){
                fnd = true;         
            }else{
                if (fnd == true){
                    var cur = parseInt(row.className);
                    var icon = 'icon_' + row.id;
                    if (cur > lvl){
                        row.style.display = sub_display;
                        if (sub_display != 'none'){
                            var iconimg = document.getElementById(icon);
                            $(iconimg).removeClass('glyphicon-plus btn-info');
                            $(iconimg).addClass('glyphicon-minus btn-warning');
                        }else{                    
                            $(iconimg).removeClass('glyphicon-minus btn-info');
                            $(iconimg).addClass('glyphicon-plus btn-warning');
                        }
                    }else{
                        fnd = false;
                        break;
                    }
              }
            }
        }

        for (i = 0; i < obj.cells[0].childNodes.length; i++){
            var imgObj = obj.cells[0].childNodes[i];
            if (imgObj.tagName == "IMG"){
                if($(imgObj).hasClass('glyphicon-plus btn-info')){
                    $(imgObj).removeClass('glyphicon-plus btn-info');
                    $(imgObj).addClass('glyphicon-minus btn-warning');
                }else{
                    $(imgObj).removeClass('glyphicon-minus btn-warning');
                    $(imgObj).addClass('glyphicon-plus btn-info');
                }
            }
        }

    }

    function articleDel(name,kind_id,url) {
        top.layer.confirm(name,{
            icon:3,
            btn:['确定','取消'],
        } , function(){
            $.ajax({
                url : url,
                type : "post",
                data : {kind_id:kind_id},
                dataType : "json",
                success:function(data){
                    if (data.status == 0) { 
                        top.layer.msg(data.message);
                    } else {
                        top.layer.msg(data.message);
                        window.location = window.location;
                    }
                }
            });
        } , function(){
            layer.close(); //再执行关闭 
        })
    }
</script>
</body>
</html>